<script setup>
import { onMounted } from 'vue'
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)
onMounted(() => {
  ScrollTrigger.create({
    trigger: '.box1',
    scrub: true,
    start: 'top top',
    end: '200% top',
    pin: true,
    animation: gsap
      .timeline()
      .to('.box1-text', { y: 0 }, '+=50%')
      .to('.box1-text', { yPercent: -100 })
  })
  gsap.to('.box2', {
    x: '100vw',
    scrollTrigger: {
      trigger: '.box2',
      scrub: true,
      markers: true,
      start: 'top top',
      end: 'bottom top',
      pin: true
    }
  })
})
</script>

<template>
  <div class="box0"></div>
  <div class="box1 w-full h-[600px] bg-[#999]"></div>
  <div class="box2 w-full h-[600px] bg-[#555] flex items-end">222</div>
  <div class="box3 w-full h-[600px] bg-[blue]">333</div>
  <div class="box4 w-full h-[600px] bg-[green]"></div>
</template>
